<template>
	<view>
		<view class="top">
			<view class="top-title flex align-center justify-between">
				<text></text>
				<text>我的佣金</text>
				<text @click="showPop" class="lg text-gray cuIcon-calendar"></text>
			</view>
			<view class="top-bto flex flex-direction">
				<text>获得佣金（元）</text>
				<text>{{amountNum}}</text>
			</view>
		</view>
		<view @click="close" v-if="isShowPop" class="popup">
			<view @click.stop class="pop">
				<block v-for="(item,index) in 5">
					<view>2016-12</view>
				</block>
			</view>
		</view>
		<view class="list">
			<block v-for="(item,index) in myCommissionList">
				<view class="item flex align-center justify-between">
					<view class="item-left">
						<view>
							<text>{{item.title}}</text>
							<text>（一级分销）</text>
						</view>
						<text>{{item.addtime}}</text>
					</view>
					<text>+{{item.amount}}</text>
				</view>
			</block>
			<!-- #ifdef MP-ALIPAY -->
			<view class="empty"><u-empty text="暂无明细" mode="list" v-if="myCommissionList.length==0"></u-empty></view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				myCommissionList:[],
				amountNum:0,
				isShowPop:false,
				
			}
		},
		onLoad(opt) {
			if(opt.key){
				this.amountNum = opt.key
			}
			this.loadMyCommission()
		},
		methods: {
			loadMyCommission(){
				api.get({
					url: 'Amount/GetCommissionLog',
					data: {
						time1: '2019-01-01',
						time2:  '2021-01-01',
						user_id: uni.getStorageSync('user').user_id,
						page: 1,
						pagesize: 30,
					},
					success: data => {
						console.log(data)
						if (data.ErrCode == 0) {
							this.myCommissionList = data.Response
						}
					}
				});
			},
			showPop(){
				this.isShowPop=true
			},
			close(){
				this.isShowPop=false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty{
		height: 600rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popup{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.pop>view{
		width: 100%;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
			font-size: 24upx;
			color: #000000;
			border-bottom: 1upx solid #ddd;
	}
	.pop{
		padding: 0 20upx;
		position: absolute;
		right: 20upx;
		top: 90upx;
		width: 203upx;
			height: 301upx;
			background-color: #ffffff;
			box-shadow: 3upx 2upx 4upx 0px 
				rgba(8, 1, 3, 0.15);
			border-radius: 6upx;
	}
	.item-left>view>text:nth-child(1){
		font-size: 28upx;
		color: #000000;
		
	}
	.item-left>view>text:nth-child(2){
		font-size: 24upx;
		color: #999999;
		margin-top: 6upx;
	}
	.item-left>text{
			font-size: 22upx;
			color: #999999;
			margin-top: 14upx;
	}
	.item>text{
		font-size: 30upx;
		color: #000000;
		font-weight: 500;
	}
	.item{
		height: 120upx;
		background-color: #fff;
		border-bottom: 1upx solid #ddd;
		padding: 0 20upx;
		box-sizing: border-box;
	}
	.top-bto{
		padding-left: 24upx;
		margin-top: 60upx;
	}
	.top-bto text:nth-child(1){
			font-size: 28upx;
			color: #ffffff;
	}
	.top-bto text:nth-child(2){
		margin-top: 20upx;
		font-size: 72upx;
		font-weight: 500;
			color: #ffffff;
	}
	.top-title{
		padding: 0 20upx;
	}
	.top-title>text:nth-child(2){
		font-size: 36upx;
		color: #ffffff;
	}
	.top-title>text:nth-child(3){
		font-size: 36upx;
		color: #ffffff;
	}
	.top{
		position: relative;
		padding-top: 34upx;
		width: 100%;
		height: 350upx;
		background-color: $btn-bground;
	}
</style>
